<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
			list-style: none;
		}
		#A1{
			width: 800px;
			height: 50px;
			border: 1px solid #000000;
			margin: 0px auto;
		}
		/* .a{
			 width: 800px;
			height: 500px;
			border: 1px solid #000000;
			margin: 0px auto; 
			background-color: #000000;
		} */
		#A1 li{
			width: 125px;
			height: 35px;
			border: 1px solid #000000;
			float: left;
			padding-top: 13px;
			padding-left: 73px;
			background: darkorange;
		}
		.A2{
			width: 800px;
			height: 500px;
			margin: 0px auto;
		}
		.A2 li{
			width: 799px;
			height: 499px;
			border: 1px solid #000000;
			display: none;
		}
		
	</style>
	<body>
		<div class="" id="A1">
			<ul>
				<li id="G1">选项1</li>
				<li id="G2">选项2</li>
				<li id="G3">选项3</li>
				<li id="G4">选项4</li>
			</ul>
		</div>
		<div class="A2">
			<ul>
				<li id="g1">内容1</li>
				<li id="g2">内容2</li>
				<li id="g3">内容3</li>
				<li id="g4">内容4</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var G1=document.getElementById('G1');
		var g1=document.getElementById('g1');
		var G2=document.getElementById('G2');
		var g2=document.getElementById('g2');
		var G3=document.getElementById('G3');
		var g3=document.getElementById('g3');
		var G4=document.getElementById('G4');
		var g4=document.getElementById('g4');
		var count1=0;
		G1.onclick=function(){
			g1.style.display='block';
			count1++;
			if(count1==1){g1.style.background='darkcyan';}
			if(count1==2){g1.style.background='red';}
			if(count1==3){g1.style.background='black';}
			if(count1==4){g1.style.background='yellow';}
			if(count1==5){
				count1=0;
			}
			g2.style.display='none';
			g3.style.display='none';
			g4.style.display='none';
		}
		G2.onclick=function(){
			g2.style.display='block';
			g2.style.background='darkgreen';
			g1.style.display='none';
			g3.style.display='none';
			g4.style.display='none';
		}
		G3.onclick=function(){
			g3.style.display='block';
			g3.style.background='wheat';
			g1.style.display='none';
			g2.style.display='none';
			g4.style.display='none';
		}
		G4.onclick=function(){
			g4.style.display='block';
			g4.style.background='darkmagenta';
			g2.style.display='none';
			g3.style.display='none';
			g1.style.display='none';
		}
	</script>
</html>
